import { Button } from 'antd';
import { useRef, useState } from 'react';
import SignatureCanvas from 'react-signature-canvas';
import styles from './index.module.less';

const SignPage = (props) => {
    const { onFinish } = props;
    const [signTip, setSignTip] = useState('请签名');
    const signRef = useRef<any>(null);
    const clearSign = () => {
        signRef.current.clear();
    };
    const handleFinishSign = () => {
        const imgUrl = signRef.current.toDataURL('image/png')
        onFinish(imgUrl)
        clearSign();
    };

    return (
        <div className={styles.signContainer}>
            <div className={styles.signContent}>
                <SignatureCanvas
                    penColor="#000"
                    canvasProps={{
                        width: 500,
                        height: 250,
                        className: styles.canvasContainer
                    }}
                    ref={signRef}
                    onBegin={() => setSignTip('')}
                />
                {signTip && <div className={styles.signTip}>{signTip}</div>}
            </div>
            <div className={styles.buttonContainer}>
                <Button onClick={clearSign} className={styles.clearBtn}>
                    清除
                </Button>
                <Button onClick={handleFinishSign} className={styles.signBtn} type="primary">
                    签字确认
                </Button>
            </div>
        </div>
    );
};

export default SignPage;
